<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>本地音乐播放器</title>
    <!-- 引入 bootstrap -->
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/fontawesome-free-5.15.4-web/css/all.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<h2>举个栗子吧</h2>
<div class='hiddenMemo'
     title='我叫李华，今年18岁，你的外国朋友Petter要来中国北京，请你给他介绍一下北京。'>
    我叫李华，今年18岁，你的外国朋友Petter要来中国北京，请你给他介绍一下北京。
</div>


<script>

</script>
</body>
</html>
<style>
    /*单行隐藏显示的样式设定*/
    .hiddenMemo {
        width: 100px; /*设置隐藏显示的最大宽度*/
        white-space: nowrap; /* 设置文字在一行显示，不能换行 */
        overflow: hidden; /* 文字长度超出限定宽度，则隐藏超出的内容 */
        text-overflow: ellipsis; /* 规定当文本溢出时，显示省略符号来代表被省略的文本 */
    }


</style>